<template>
  <view class="max_box">
    <image :src="baseImgUrl + 'static/image/static/realconfirm.png'" mode="scaleToFill" class="image" />
    <view class="form_box">
      <SwkInput
        leftText="本人手机"
        :leftFlag="false"
        placeholder="请输入手机号"
        :value="phone"
        :changeInput="changePhone"
        :lockIpt="true"
      >
      </SwkInput>
      <SwkInput
        leftText="真实姓名"
        :leftFlag="false"
        placeholder="请输入您的真实姓名"
        :value="confirmList.realName"
        :changeInput="changeName"
      >
      </SwkInput>
      <SwkInput
        leftText="身份证号"
        :leftFlag="false"
        placeholder="请输入您的身份证号"
        :value="confirmList.IDCode?.length != 18 ? '' : confirmList.IDCode"
        :changeInput="changeIDCard"
      >
      </SwkInput>
      <view id="Realflex">
        <text id="Realipt">认证费用</text>
        <text id="Realiconfont">免费</text>
      </view>
      <view class="real_bottom">
        <button class="submitBtn" @click="submit">开始认证</button>
        <view class="separator">
          <text class="line"></text>
          <text class="popup_text">温馨提醒</text>
          <text class="line"></text>
        </view>
        <ul class="popup_ul">
          <li class="popup_li">
            <text class="dot">·</text>
            <text
              >恋派 | 成都婚恋网作为一个真实、 严肃平台我们要求用户必须完成身份证实名认证，
              保证用户真实可信</text
            >
          </li>
          <li class="popup_li">
            <text class="dot">·</text>
            <text>通过认证后， 点亮 【实名认证】 图标， 更能获得异性关注， 大大提高相亲成功率</text>
          </li>
          <li class="popup_li">
            <text class="dot">·</text>
            <text>通过电信+移动+联通三网联合实名校验， 确保信息真实有效</text>
          </li>
          <li class="popup_li">
            <text class="dot">·</text>
            <text>您提交的信息仅用于本站诚信认证服务， 不公开， 将严格保护您的隐私安全</text>
          </li>
        </ul>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import SwkInput from '@/components/SwkInput.vue'
import { useUserComfirmInfo } from '@/stores/index'
import { storeToRefs } from 'pinia'
import { postRealInfoAPI } from '@/services/my'
import { baseImgUrl } from "@/utils/http";
const useUserComfirmProps = useUserComfirmInfo()
//pinia数据
const { phone, id, confirmList } = storeToRefs(useUserComfirmProps)
const startRealName = confirmList.value.realName
const startIDCode = confirmList.value.IDCode
const changePhone = (e: any) => {
  phone.value = e.detail.value
}
const changeName = (e: any) => {
  confirmList.value.realName = e.detail.value
}
const changeIDCard = (e: any): void => {
  confirmList.value.IDCode = e.detail.value
}
//提交数据
const submit = () => {
  if (confirmList.value.realName == startRealName && confirmList.value.IDCode == startIDCode) {
    return uni.showToast({
      title: '输入新的信息',
      icon: 'error',
    })
  }
  if (confirmList.value.realName == '' || confirmList.value.IDCode == '') {
    return uni.showToast({
      title: '请输入信息',
      icon: 'error',
    })
  }
  //身份证的正则
  const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
  if (!reg.test(confirmList.value.IDCode as string)) {
    return uni.showToast({
      title: '身份证格式不对',
      icon: 'error',
    })
  }
  uni.showModal({
    title: '确认修改信息吗',
    content: '您确定要确认修改信息吗？',
    success: function (res) {
      if (res.confirm) {
        postRealInfoAPI({
          id: id.value, //用户id
          realName: confirmList.value.realName as string, //真实姓名
          IDCode: confirmList.value.IDCode as string, //身份证
        }).then((res) => {
          if (res.code == 400) {
            uni.showToast({
              title: res.msg,
              icon: 'error',
            })
            return
          }
          useUserComfirmProps.getUserInfo()
          uni.showToast({
            title: res.msg,
            icon: 'success',
          })
          uni.switchTab({
            url: '/pages/my/my',
          })
        })
      } else if (res.cancel) {
        uni.showToast({
          title: '取消修改',
          icon: 'error',
        })
      }
    },
  })
}
</script>

<style scoped lang="scss">
.popup_ul {
  color: #a7a6a6;

  .popup_li {
    margin: 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
  }

  .dot {
    font-size: 2.5rem;
    margin-right: 0.5rem;
  }
}

.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
}

.popup_text {
  font-size: 28rpx;
  color: #999;
}

.real_bottom {
  width: 80%;
  margin: 0 auto;
}

#Realflex {
  display: flex;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}

#Realipt {
  height: 4rem;
  line-height: 4rem;
  font-size: 28rpx;
}

#Realiconfont {
  font-size: 28rpx;
  color: rgb(116, 190, 116);
  font-weight: 500;
  margin-left: 1rem;
}

.submitBtn {
  margin: 8% auto 10%;
  background: rgb(36, 52, 176);
  border-radius: 1.5em;
  color: white;
}

.max_box {
  width: 100vw;
  position: relative;
  padding-bottom: 2rem;
  box-sizing: border-box;

  .form_box {
    position: absolute;
    top: 40%;
    width: 100%;
  }

  .image {
    width: 100vw;
    height: 60vh;
  }
}
</style>
